{% extends 'base.html' %}
{% load staticfiles %}
{% load comments %}
{% load forum_tags %}
{% load  follow_tags %}
{% block style %}
    <style>
        #div_id_honeypot {
            display: none;
        }
    </style>
{% endblock style %}
{% block main %}
    <main class="col-md-8">
        <div class="card post-detail">
            <nav class="card-header">
                <a href="{% url 'forum:index' %}">django forum demo</a> >
                {% with ancestors=post.category.get_ancestors %}
                    {% if ancestors %}
                        {% for ancestor in ancestors %}
                            <a href="">{{ ancestor }}</a> >
                        {% endfor %}
                    {% endif %}
                {% endwith %}
                <a href="{% url 'forum:category_posts' post.category.slug %}">{{ post.category }}</a>
            </nav>
            <div class="card-block">
                <a href="{{ post.author.get_absolute_url }}" class="pull-right"><img
                        src="{{ post.author.mugshot_thumbnail.url }}"
                        style="width: 73px;"></a>

                <h3>{{ post.title }}</h3>
                <ul class="list-inline text-muted small">
                    <li class="list-inline-item"><a
                            href="{{ post.author.get_absolute_url }}"><strong>{{ post.author.nickname }}</strong></a>
                    </li>
                    <li class="list-inline-item">
                        <time>{{ post.created|timesince }}前</time>
                    </li>
                    <li class="list-inline-item">{{ post.views }} 次点击</li>
                    {% if post.author == request.user %}
                        <li class="list-inline-item"><a href="{% url 'forum:edit' post.pk %}">编辑</a></li>
                    {% endif %}
                </ul>
                {% if post.body %}
                    <hr>
                    <div class="post-body">
                        {{ post.body|mark|bleach|safe }}
                    </div>
                {% endif %}
            </div>
            <div class="card-footer">
                <ul class="list-inline mb-0">
                    {% get_ctype_pk post as post_ctype_pk %}
                    <li class="list-inline-item small">
                        {% is_following request.user post 'favorite' as favorite_flag %}
                        <a href="{% url 'follows:follow_all' content_type_id=post_ctype_pk object_id=post.pk ftype='favorite' %}"
                           role="button" id="favorite-btn"
                           {% if favorite_flag %}style="display: none"{% endif %}><i class="fa fa-star-o"
                                                                                     aria-hidden="true"></i> 收藏</a>
                        <a href="{% url 'follows:unfollow_all' content_type_id=post_ctype_pk object_id=post.pk ftype='favorite' %}"
                           role="button" id="unfavorite-btn"
                           {% if not favorite_flag %}style="display: none"{% endif %}><i class="fa fa-star"
                                                                                         aria-hidden="true"></i> 已收藏</a>
                        （<span id="favorite-number">{{ post|follower_count:'favorite' }}</span>）
                    </li>
                    <li class="list-inline-item small">
                        {% is_following request.user post 'watch' as watch_flag %}
                        <a href="{% url 'follows:follow_all' content_type_id=post_ctype_pk object_id=post.pk ftype='watch' %}"
                           role="button" id="watch-btn"
                           {% if watch_flag %}style="display: none"{% endif %}><i class="fa fa-heart-o"
                                                                                  aria-hidden="true"></i> 喜欢</a>
                        <a href="{% url 'follows:unfollow_all' content_type_id=post_ctype_pk object_id=post.pk ftype='watch' %}"
                           role="button" id="unwatch-btn"
                           {% if not watch_flag %}style="display: none"{% endif %}><i class="fa fa-heart"
                                                                                      aria-hidden="true"></i> 已喜欢</a>
                        （<span id="watch-number">{{ post|follower_count:'watch' }}</span>）
                    </li>
                </ul>
            </div>
        </div>
        <ul class="list-group mb-1">
            {% if post.replies.count %}
                <li class="list-group-item small text-muted"><span>{{ post.replies.count }} 回复</span> |
                    <span>直到 {{ post.latest_reply.submit_date }}</span></li>
            {% else %}
                <li class="list-group-item">目前还没有回复</li>
            {% endif %}
            {% for reply in post.replies.all %}
                <li class="list-group-item" id="c{{ reply.pk }}">
                    <div class="media">
                        <a class="media-left" href="{{ reply.user.get_absolute_url }}">
                            <img class="media-object" src="{{ reply.user.mugshot_thumbnail.url }}" alt=""
                                 style="width: 48px;">
                        </a>
                        <div class="media-body">
                            <ul class="list-inline text-muted small">
                                <li class="list-inline-item"><a
                                        href="{{ reply.user.get_absolute_url }}"><strong
                                        class="nickname">{{ reply.user.nickname }}</strong></a>
                                </li>
                                <li class="list-inline-item">
                                    <time>{{ reply.submit_date|timesince }}前</time>
                                </li>
                                <li class="pull-right">{{ forloop.counter }} 楼</li>
                            </ul>
                            <div class="">
                                {{ reply.comment|parse_nicknames|mark|bleach|safe }}
                            </div>
                            <ul class="list-inline text-muted small">
                                {% get_ctype_pk reply as reply_ctype_pk %}
                                <li class="list-inline-item">
                                    {% is_following request.user reply 'praise' as praise_flag %}
                                    <a href="{% url 'follows:follow_all' content_type_id=reply_ctype_pk object_id=reply.pk ftype='praise' %}"
                                       class="thumbup-btn"
                                       role="button"
                                       {% if praise_flag %}style="display: none"{% endif %}>
                                        <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                    </a>
                                    <a href="{% url 'follows:unfollow_all' content_type_id=reply_ctype_pk object_id=reply.pk ftype='praise' %}"
                                       class="unthumbup-btn"
                                       role="button"
                                       {% if not praise_flag %}style="display: none"{% endif %}>
                                        <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                    </a>
                                    <span class="praise-number">{{ reply|follower_count:'praise' }}</span>
                                </li>
                                ·
                                {% if request.user.is_authenticated %}
                                    <li class="list-inline-item">
                                        <a href="javascript:" class="reply_btn"
                                           data-nickname="{{ reply.user.nickname }}">回复</a>
                                    </li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                </li>
            {% endfor %}
        </ul>
        <div class="card">
            <div class="card-header">添加一条新回复</div>
            <div class="card-block">
                {% if user.is_authenticated %}
                    {% render_comment_form for post %}
                {% else %}
                    <a href="{% url 'account_login' %}?next={{ request.path }}">登录</a>以回复
                {% endif %}
            </div>
        </div>
    </main>
{% endblock main %}

{% block script %}
    <script>
        $(document).ready(function () {
            $('.reply_btn').on('click', function () {
                var $this = $(this);
                var $nickname = '@' + $this.attr('data-nickname') + ' ';
                var $replyArea = $('#div_id_comment').find('textarea').first();
                $replyArea.val($replyArea.val() + $nickname).focus()
            });


            $('#id_reply_form').submit(function () {
                $('#submit-id-submit').attr('disabled', true).val('正在提交...');
            });


            $("#favorite-btn, #unfavorite-btn").click(function () {
                $.post($(this).attr("href"), {});
                var $favoriteNumber = $(this).parent().find("#favorite-number").first().text();
                if ($(this).attr("id") == "favorite-btn") {
                    $(this).parent().find("#favorite-number").first().text(parseInt($favoriteNumber) + 1)
                } else {
                    $(this).parent().find("#favorite-number").first().text(parseInt($favoriteNumber) - 1)
                }
                $(this).parent().find("#favorite-btn, #unfavorite-btn").toggle();
                return false
            });

            $("#watch-btn, #unwatch-btn").click(function () {
                $.post($(this).attr("href"), {});

                var $watchNumber = $(this).parent().find("#watch-number").first().text();
                if ($(this).attr("id") == "watch-btn") {
                    $(this).parent().find("#watch-number").first().text(parseInt($watchNumber) + 1)
                } else {
                    $(this).parent().find("#watch-number").first().text(parseInt($watchNumber) - 1)
                }

                $(this).parent().find("#watch-btn, #unwatch-btn").toggle();
                return false
            });

            $(".thumbup-btn, .unthumbup-btn").click(function () {
                $.post($(this).attr("href"), {});
                var $praiseNumber = $(this).parent().find(".praise-number").first().text();
                if ($(this).attr("class") == "thumbup-btn") {
                    $(this).parent().find(".praise-number").first().text(parseInt($praiseNumber) + 1)
                } else {
                    $(this).parent().find(".praise-number").first().text(parseInt($praiseNumber) - 1)
                }
                $(this).parent().find(".thumbup-btn, .unthumbup-btn").toggle();
                return false
            });

            /*
             function thumbup() {
             var $this = $(this);
             $.post(
             $(this).attr("href"),
             {},
             function (data, status) {
             $this.off('click');
             $this.on('click', unthumbup)
             }
             );
             return false
             }

             function unthumbup() {
             var $this = $(this);
             $.post(
             $(this).attr("href"),
             {},
             function (data, status) {
             $this.off('click');
             $this.on('click', thumbup)
             }
             );
             return false
             }

             $('.thumbup-btn').on('click', thumbup);
             $('.unthumbup-btn').on('click', unthumbup);
             */
        });
    </script>
{% endblock script %}